<template>
	<view style="height: 100%">
		<!-- <webView url="http://125.88.236.31/img/pic2.d3ee28ce.png"></webView> -->
		<view class="pro_center">
			<view class="pro_center_head">
				<block>
					<homeNav :title="isShow?'推广中心':''" txtColor="#FFFFFF" :show_bol="isShow?false:true"
						image="https://oos-cn.ctyunapi.cn/front-end/static/static/back1.png"></homeNav>
				</block>
				<image src="http://8.134.96.187:7110/group1/image/bg688904586416941683.png" class="pro_center_head_bg">
				</image>
				<view class="head_top flex-row-start">
					<image :src="promoterInfo.plUserAvatar" class="avatar"></image>
					<view class="head_content">
						<view class="username">{{ promoterInfo.plUserName }}</view>
					</view>
					<view class="copy-box">
						{{info}} |<text style="margin-left:10rpx;" @tap="copyText" :data-busId="info">复制</text>
					</view>
				</view>
			</view>
			<block>
				<view style="position: absolute;width:100%;height:280rpx" v-if="datas.inviteUse">
					<view class="head_bottom">
						<view class="head-title" @click="spreadList">
							<view class="head-title-text">邀新升级</view>
							<view class="arrows_r"></view>
						</view>
						<view class="bom_r" v-if="promoterInfo.currentSpreadLevel">
							<view class="levels flex-row-between">
								<view>LV{{ promoterInfo.currentSpreadLevel.spreadLevelId || '' }}</view>
								<view v-if="promoterInfo.nextSpreadLevel">
									LV{{ promoterInfo.nextSpreadLevel.spreadLevelId || '' }}</view>
								<view v-else>∞</view>
							</view>
							<view class="progress">
								<image
									src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/doc_bg.png"
									:style="'left: calc(' + promoterInfo.progress + '% - 20rpx)'" class="doc_wrap">
								</image>
								<view class="progress_bg" :style="'width: ' + promoterInfo.progress + '%;'"></view>
							</view>
							<view class="desc_wrap flex-row-between">
								<view>再推广<text style="color:#FC724C">{{ promoterInfo.differPromotionNum }}</text>人即可升级
								</view>
								<view>目标：{{ promoterInfo.currentSpreadLevel.needSpreadEndNum }}</view>
							</view>
						</view>
						<view class="bom_l">
							<view class="bom_l-1">
								<view class="popularize_count">{{ datas.accumulateNum }}</view>
								<view class="popularize_desc">累计邀新(人)</view>
							</view>
							<view class="bom_l-1">
								<view class="popularize_count">{{ datas.todayNewNum }}</view>
								<view class="popularize_desc">今日邀新(人)</view>
							</view>
						</view>
					</view>
				</view>
				<view class="promotion-box" >
					<view @tap="toPromotion">
						<image src="http://8.134.96.187:7110/group1/image/icon-gerentuiguang6356241213825928280.png">
						</image>
						<view>个人推广</view>
					</view>
				</view>
				<!-- <view class="box-1" v-if="datas.laxinUse">
					<view class="head-title" @click="totalList(0)">
						<view class="head-title-text">拉新消费</view>
						<view class="arrows_r"></view>
					</view>
					<view class="bom_l-1">
						<view class="bom_l-2">
							<view class="popularize_count">{{datas.laxinIncome||0}}</view>
							<view class="popularize_desc">累计收益</view>
						</view>
					</view>
				</view> -->
				<!-- <view class="box-1" v-if="datas.firstMonthUse">
					<view class="head-title" @click="totalList(1)">
						<view class="head-title-text">首月消费</view>
						<view class="arrows_r"></view>
					</view>
					<view class="bom_l-1">
						<view class="bom_l-2">
							<view class="popularize_count">{{datas.firstMonthIncome||0}}</view>
							<view class="popularize_desc">累计收益</view>
						</view>
					</view>
				</view> -->
			</block>
		</view>

		<shareTabs :tabs='tabs' :tabsShow='tabsShow' :shareConfig='shareConfig' @tabsClose='tabsClose'></shareTabs>
	</view>
</template>

<script>
	var promotion_1 = require("../../../../api/marketing/promotion");
	const {
		getPromoterDetail,
		getUserInandReceData
	} = promotion_1
	var marketing_1 = require("../../../../api/marketing/marketing");
	const {
		generateQrCode
	} = marketing_1
	import shareTypes from '../../../../utils/shareTypes';
	import shareTabs from '@/marketing_page/components/share-tabs/share-tabs';
	import homeNav from '@/components/homeNav/homeNav';
	const app = getApp();
	export default {
		components: {
			shareTabs,
			homeNav
		},
		data() {
			return {
				isShow: true,
				info: "",
				progress: 0,
				tabsShow: false,
				tabsShow1: true,
				userInfo: {},
				promoterInfo: {
					progress: '',
					plUserAvatar: '',
					plUserName: '',

					currentSpreadLevel: {
						spreadLevelId: '',
						spreadLevelName: '',
						needSpreadEndNum: ''
					},

					spreadCount: '',
					spreadTodayCount: '',
					referNewTotal: '',
					firstMonthTotal: '',

					nextSpreadLevel: {
						spreadLevelId: ''
					},

					differPromotionNum: ''
				},
				rewardTotalInfo: {
					couponAmount: '',
					integral: '',
					serveFreeTimes: '',
					rewardAmount: ''
				},
				queryParam: {
					plUserId: uni.getStorageSync('memberId'),
					current: 1,
					size: 5
				},
				promotionList: [],
				sharePath: '',
				//页面分享路径
				shareConfig: {}, //分享tabs的配置信息 路径和参数用于生成二维码和链接
				showQrCodePopup: false,
				showPosterPopup: false,
				qrcode: '', //小程序二维码链接
				tabs: ['share', 'qrcode', 'poster'],
				datas:''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.getUserInfo();
			this.setSharePath();
			this.getPromoterInfo();
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {
			console.log('小程序分享')
			let userInfo = this.userInfo;
			return {
				imageUrl: "https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/promotion_pic.png",
				title: `${userInfo.name}邀请你一起来充电`,
				path: this.sharePath
			};
		},
		onPageScroll(res) {
			console.log("页面滚动了")
			if (res.scrollTop > 90) {
				this.isShow = false
			} else {
				this.isShow = true
			}
		},
		methods: {
			// 获取推广员信息
			async getPromoterInfo() {
				const _params = {
					plUserId: uni.getStorageSync('memberId')
				};
				const {
					code,
					data
				} = await getPromoterDetail(_params).catch((err) => {});
				this.info=uni.getStorageSync('memberId')
				let promoterInfo = data;
				// 初始化进度条
				let progress = 0;

				// 设置再推广多少人可以升级
				let differPromotionNum = 0;
				promoterInfo.progress = 0;
				// 判断当前等级的最高区间数是否存在
				if (promoterInfo?.currentSpreadLevel?.needSpreadEndNum) {
					promoterInfo.currentSpreadLevel.needSpreadEndNum = promoterInfo.currentSpreadLevel
						.needSpreadEndNum + 1;
					progress = ((promoterInfo.spreadCount || 0) / promoterInfo.currentSpreadLevel.needSpreadEndNum) *
						100;
					differPromotionNum = promoterInfo.currentSpreadLevel.needSpreadEndNum - (promoterInfo
						.spreadCount || 0);
				}
				// promoterInfo.nextSpreadLevel = null

				// 已经达到最高等级，判断这个字段是否存在不存在就是最高等级
				if (!promoterInfo.nextSpreadLevel) {
					progress = 100; //将进度条补充满
					promoterInfo.currentSpreadLevel.needSpreadEndNum = '∞'; //设置目标为推广的人数
					differPromotionNum = '∞';
				}
				promoterInfo.differPromotionNum = differPromotionNum;
				setTimeout(() => {
					this.setData({
						'promoterInfo.progress': progress
					});
				}, 300);
				
				if (code === 200) {
					this.setData({
						promoterInfo
					});
				}
			},
			getUserInfo() {
				let userInfo = uni.getStorageSync('userInfo') || {}
				getUserInandReceData(uni.getStorageSync('memberId')).then(res=>{
					if(res.code==200){
						this.datas=res.data
					}
				})
				this.setData({
					userInfo
				});
			},
			//邀新升级记录
			spreadList() {
				uni.navigateTo({
					url: '../promotion_record/promotion_record'
				});
			},
			//拉新消费/首月消费记录
			totalList(num){
				uni.navigateTo({
						url: `../recruit_plan/details?type=${num}`
					});
			},
			//个人推广
			toPromotion() {
				this.setData({
					tabsShow: true
				});
				console.log(this.tabsShow, '去推广')
				console.log(this.shareConfig)
			},

			tabsClose() {
				this.setData({
					tabsShow: false
				});
			},
			closeTabsShow() {
				this.setData({
					tabsShow: false
				});
			},

			setSharePath() {
				let uid = uni.getStorageSync('memberId');
				let userInfo = this.userInfo;
				this.setData({
					sharePath: `/pages/sharePage/sharePage?uid=${uid}&ST=${shareTypes.TUIGUANG}`,
					shareConfig: {
						path: '/pages/sharePage/sharePage',
						scene: `uid=${uid}&ST=${shareTypes.TUIGUANG}`,
						wxPath: `pages/sharePage/sharePage?uid=${uid}&ST=${shareTypes.TUIGUANG}`,
						wxTitle: `${userInfo.name}邀请你一起来充电`,
						wxImage: 'http://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/invitation/activity.png'
					}
				});
			},

			// 关闭tabs弹窗
			onClose() {
				this.$emit('tabsclose');
			},
			//复制
			copyText(e) {
				uni.setClipboardData({
					data: this.info+'',
					showToast: true,
					success: function () {
						console.log('success');
					}
				});
			},
		}
	}
</script>
<style lang="less" scoped>
	@import "../../../../commin/flex.less";

	.hb_container {
		position: relative;

		.hb_bg {
			width: 702rpx;
			height: 1090rpx;
			border-radius: 20rpx;
		}

		.hb_qrcode {
			position: absolute;
			top: 740rpx;
			left: 250rpx;
			width: 200rpx;
			height: 200rpx;
		}
	}

	page {
		background: #F2F3F5;
		padding-bottom: 130rpx;
	}

	.pro_center {
		padding: 0 0 16rpx 0rpx;
	}

	.pro_center_head {
		height: 476rpx;
		position: relative;
		z-index: 0;
		padding: 36rpx 0rpx;
		box-sizing: border-box;
		margin-bottom: 16rpx;
	}

	// .pro_center_head .rule {
	// 	position: absolute;
	// 	right: 0;
	// 	top: 142rpx;
	// 	width: 145rpx;
	// 	height: 50rpx;
	// 	color: #5e321e;
	// 	font-size: 24rpx;
	// 	padding-left: 10rpx;
	// 	box-sizing: border-box;
	// }

	.pro_center_head .pro_center_head_bg {
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}

	.pro_center_head .head_top {
		margin: 0 32rpx;
		margin-top: 90rpx;
		margin-bottom: 76rpx;
		height: 180rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6284) 0%, #FFFFFF 100%);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 0 30rpx;
		justify-content: flex-start;
	}

	.pro_center_head .head_top .avatar {
		width: 100rpx;
		height: 100rpx;
		margin-right: 32rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
	}

	.pro_center_head .head_top .username {
		// margin-bottom: 20rpx;
		font-size: 34rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #303133;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
		width: 230rpx;
		margin-right: 20rpx;
	}

	.pro_center_head .head_top .copy-box {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #606266;
		flex:1;
		text-align: right;
	}

	// .pro_center_head .head_top .desc {
	// 	font-size: 30rpx;
	// 	font-family: PingFang SC;
	// 	font-weight: 500;
	// 	color: #a56332;
	// }
	.head_bottom {
		height: 411rpx;
		background: #FFFFFF;
		box-shadow: 2rpx 3rpx 14rpx 0rpx rgba(166, 171, 178, 0.1412);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: 20rpx 32rpx;
		position: absolute;
		top: -190rpx;
		left: 0;
		right: 0;
	}

	.head_bottom .head-title {
		height: 110rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #DCDFE6;
	}

	.head_bottom .head-title .head-title-text {
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #303133;
	}

	.head_bottom .head-title .arrows_r {
		width: 15rpx;
		height: 15rpx;
		border-top: 1px solid #606266;
		border-right: 1px solid #606266;
		transform: rotate(45deg);
	}

	.head_bottom .bom_l {
		display: flex;
		height: 160rpx;
		padding: 0 30rpx;
		align-items: center;
		margin-top: 20rpx;
	}

	.head_bottom .bom_l .bom_l-1 {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.head_bottom .popularize_desc {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #606266;
		margin-bottom: 20rpx;
	}

	.head_bottom .popularize_count {
		font-size: 42rpx;
		font-weight: bold;
		color: #303133;
	}

	.head_bottom .bom_r {
		height: 110rpx;
		padding: 0 30rpx;
		display: flex;
		margin-top: 20rpx;
		flex-direction: column;
		justify-content: center;
	}

	.head_bottom .bom_r .levels {
		font-size: 25rpx;
		color: #4b2312;
		margin-bottom: 10rpx;
	}

	.head_bottom .bom_r .desc_wrap {
		font-size: 24rpx;
		font-weight: 400;
		color: #5e321e;
	}

	.head_bottom .bom_r .progress {
		height: 16rpx;
		position: relative;
		border-radius: 8rpx;
		background: #F4D6AC;
		margin-bottom: 10rpx;
	}

	.head_bottom .bom_r .progress .doc_wrap {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 26rpx;
		height: 26rpx;
		background: rgba(231, 191, 137, 0.5);
		border-radius: 50%;
		transition: left 0.5s;
	}

	.head_bottom .bom_r .progress .doc_wrap .doc {
		width: 14rpx;
		height: 14rpx;
		border-radius: 50%;
		background: #ffffff;
	}

	.head_bottom .bom_r .progress .progress_bg {
		width: 0;
		background: linear-gradient(90deg, #ffc17c, #ffac47);
		height: 100%;
		border-radius: 8rpx;
		transition: width 0.5s;
	}

	.promotion-box {
		height: 230rpx;
		background: #FFFFFF;
		box-shadow: 2rpx 3rpx 14rpx 0rpx rgba(166, 171, 178, 0.1412);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #606266;
		margin: 0rpx 32rpx;
		margin-top: 270rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}

	.promotion-box image {
		width: 100rpx;
		height: 100rpx;
	}

	.box-1 {
		height: 273rpx;
		background: #FFFFFF;
		box-shadow: 2rpx 3rpx 14rpx 0rpx rgba(166, 171, 178, 0.1412);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: 0rpx 32rpx;
		margin-top: 20rpx;
	}

	.box-1 .head-title {
		height: 110rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #DCDFE6;
	}

	.box-1 .head-title .head-title-text {
		font-size: 30rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #303133;
	}

	.box-1 .head-title .arrows_r {
		width: 15rpx;
		height: 15rpx;
		border-top: 1px solid #606266;
		border-right: 1px solid #606266;
		transform: rotate(45deg);
	}

	.box-1 .bom_l-1 {
		height: 160rpx;
		display: flex;
		padding: 0 30rpx;
		align-items: center;
	}

	.box-1 .bom_l-2 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.box-1 .popularize_desc {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #606266;
		margin-bottom: 20rpx;
	}

	.box-1 .popularize_count {
		font-size: 42rpx;
		font-weight: bold;
		color: #303133;
	}

	.award_wrap {
		height: 268rpx;
		background: linear-gradient(0deg, #ffffff, #f4f6f8);
		border: 2rpx solid #ffffff;
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
		box-sizing: border-box;
		border-radius: 16rpx;
		padding: 0rpx 32rpx;
		margin-bottom: 16rpx;
	}

	.award_wrap .title {
		height: 100rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #303133;
		border-bottom: 1px solid #dcdfe6;
	}

	.award_wrap .award_container {
		height: 167rpx;
	}

	.award_wrap .award_container .item .price {
		font-size: 40rpx;
		font-weight: 500;
		color: #fc724c;
		margin-bottom: 10rpx;
	}

	.award_wrap .award_container .item .desc {
		font-size: 26rpx;
		color: #606266;
	}

	.record_wrap {
		background: linear-gradient(0deg, #ffffff, #f4f6f8);
		border: 2rpx solid #ffffff;
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
		box-sizing: border-box;
		border-radius: 16rpx;
		padding: 0rpx 32rpx;
	}

	.record_wrap .title_wrap {
		height: 100rpx;
		border-bottom: 1px solid #dcdfe6;
	}

	.record_wrap .title_wrap .title {
		font-size: 30rpx;
		font-weight: bold;
		color: #303133;
	}

	.record_wrap .arrows_wrap {
		font-size: 28rpx;
		color: #6DB12E;
	}

	.record_wrap .arrows_r {
		width: 12rpx;
		height: 12rpx;
		border-top: 1px solid #6DB12E;
		border-right: 1px solid #6DB12E;
		transform: rotate(45deg);
		margin-left: 10rpx;
	}

	.record_wrap .record_list .list_item {
		padding: 36rpx 0;
		border-bottom: 1rpx dotted #c0c4cc;
	}

	.record_wrap .record_list .list_item:last-child {
		border: 0;
	}

	.record_wrap .record_list .list_item .item_top {
		margin-bottom: 22rpx;
	}

	.record_wrap .record_list .list_item .item_top .title {
		font-size: 30rpx;
		font-weight: bold;
		color: #303133;
	}

	.record_wrap .record_list .list_item .item_top .date {
		font-size: 24rpx;
		font-weight: 400;
		color: #606266;
	}

	.record_wrap .record_list .list_item .item_bottom {
		font-size: 26rpx;
		color: #fc724c;
	}

	.record_wrap .record_list .list_item .item_bottom text {
		font-weight: bold;
	}

	.btn_wrap {
		width: 100%;
		height: 120rpx;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.btn_wrap .btn {
		width: 686rpx;
		height: 88rpx;
		background: #6DB12E;
		border-radius: 44rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #ffffff;
	}

	.nodata_wrap {
		padding: 140rpx 0;
	}

	.nodata_wrap .img {
		width: 514rpx;
		height: 398rpx;
		margin-bottom: 30rpx;
	}

	.nodata_wrap .desc {
		font-size: 28rpx;
		color: #1487fa;
	}
</style>